import React, { Component } from 'react';
import {
	StyleSheet, Text, View, PixelRatio, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import moment from 'moment';
const scale = GLOBAL.SCALE;
export class OyTypeItem extends Component {
	constructor(props) {
		super(props)
	}
	render () {
		let { data, listPressFn, btnFn } = this.props;
		let { orderId, companyName, staffName, bizTeamName, organName, sourceDate, overdueDay, notCheckAmount, overdueDate, overdueStatus, overdueAmount } = data;
		let textStats = '';
		if (overdueStatus == '2' || (overdueStatus == '1' && overdueAmount <= 10)) {  //未逾期，已逾期，已延期，已关闭
			textStats = '已关闭'
		} else if (overdueStatus == '1' && overdueAmount > 10) {
			textStats = '已逾期'
		} else if (overdueStatus == '0') {
			textStats = '已延期'
		} else {
			textStats = '未逾期'
		}
		return (
			<View style={styles.listOuter}>
				<TouchableOpacity onPress={() => { listPressFn && listPressFn(data); }}>
					<View style={styles.listBox}>
						<View style={styles.listHead}>
							<Text style={styles.title}>{orderId}</Text>
							<Text style={styles.info}>{companyName}丨{staffName}</Text>
							<TouchableOpacity style={styles.btnPress} onPress={() => { btnFn && btnFn() }}>
								<Text style={styles.btn}>{textStats}</Text>
							</TouchableOpacity>
						</View>
						<View style={styles.timeBock}>
							<View style={styles.timeBox}>
								<Text style={styles.timeHead}>占用日期</Text>
								<Text style={styles.timeDown}>{sourceDate && moment(sourceDate).format("YYYY/MM/DD")}</Text>
							</View>
							<View style={styles.timeBox}>
								<Text style={styles.timeHead}>到期日</Text>
								<Text style={styles.timeDown}>{overdueDate && moment(overdueDate).format("YYYY/MM/DD")}</Text>
							</View>
							<View style={styles.timeBox}>
								<Text style={styles.timeHead}>逾期天数</Text>
								<Text style={styles.timeDown}>{overdueDay || '-'}</Text>
							</View>
						</View>
						<View style={styles.timeBock}>
							<View style={[styles.timeBox, { width: '100%' }]}>
								<Text style={styles.timeHead}>未核金额</Text>
								<Text style={styles.timeDown}>￥{notCheckAmount || '-'}</Text>
							</View>
						</View>
						<View style={styles.timeBock}>
							<View style={[styles.timeBox, { width: '100%' }]}>
								<Text style={styles.timeHead}>业务员</Text>
								<Text style={[styles.timeHead, { marginTop: 2 * scale }]}>
									{staffName || bizTeamName || organName ? `${staffName || '--'} | ${bizTeamName || '--'} | ${organName || '--'}` : '--'}
								</Text>
							</View>
						</View>
					</View>
				</TouchableOpacity>
			</View>
		)
	}
}
const styles = StyleSheet.create({
	listOuter: { flexDirection: 'row', justifyContent: 'center' },
	listBox: {
		width: 351 * scale,
		backgroundColor: style.color.white,
		borderRadius: 6 * scale,
		marginBottom: 18 * scale,
	},
	listHead: {
		height: 65 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		marginBottom: 18 * scale,
		position: 'relative'
	},
	title: {
		marginTop: 14 * scale,
		fontSize: 13 * scale,
		color: style.color.atrous,
		paddingLeft: 12 * scale
	},
	info: {
		paddingLeft: 12 * scale,
		fontSize: 12 * scale,
		color: '#848A96',
		marginTop: 4 * scale
	},
	infoName: {
		paddingLeft: 12 * scale,
	},
	btn: {
		color: '#0E7FFD',
		fontSize: 14 * scale,
		fontWeight: 'bold'
	},
	btnPress: {
		position: 'absolute',
		top: 7 * scale,
		right: 9 * scale,
		padding: 10 * scale
	},
	timeBock: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		paddingBottom: 20 * scale,
	},
	timeBox: {
		width: 90 * scale
	},
	timeHead: {
		fontSize: 12 * scale,
		color: style.color.atrous
	},
	timeDown: {
		fontSize: 14 * scale,
		color: style.color.atrous,
		fontWeight: 'bold',
		marginTop: 4 * scale
	},

})